<template>
	<view>
		<u-navbar :background="background" :borderBottom="false">
			<view class="ft_16 fw-b">
				限时抢购
			</view>
		</u-navbar>
		<view class="content">
			<view class="con_1">
				<image :src="banner"></image>
			</view>
			<view class="con_2">
				<text class="c-999">距离活动结束：</text>
				<u-count-down :timestamp="timestamp" :show-days="false" separator-color="#ee1b1b" bg-color="#ee1b1b" color="#ffffff" font-size="24" :show-border="true" border-color="#ee1b1b"></u-count-down>
			</view>
			<view class="con_3">
				<view class="shoplists display" v-for="(item,index) in xianshiList" :key="index" @click="go_detail(item)">
					<view class="shopimg">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="p_left_10">
						<view class="p_bottom_10 c-333">
							{{item.name}}
						</view>
						<view class="p_bottom_10 ft_12 c-red">
							<text class="p_right_10 c-333">限时价</text>
							<text>￥</text>
							<text class="ft_18 fw-b">{{item.prices}}</text>
							<text class="shancText c-999 p_left_10">￥{{item.market_price}}</text>
						</view>
						<view class="display">
							<u-line-progress active-color="#F1A421" :round="true" :percent="item.bili" height="38" style="position: relative;width: 250rpx;">
								<view class="ft_12" style="position: absolute;left: 20px;">仅剩{{item.shengyu}}件</view>
							</u-line-progress>
							<view class="ft_12 qiangG">
								立即抢购
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',},
				banner:"/static/index/xianshi.png", //banner图
				
				xianshiList:[],  //限时列表
				timestamp:"", //倒计时
				
			}
		},
		onLoad() {
			this.getshopList() //秒杀列表
		},
		methods: {
			getshopList(){ //秒杀列表
				this.$myRequest('goods/seckillList',{})
				.then(res=>{
					console.log(res.data.data);
					let data=res.data.data
					let newtime= Date.parse(new Date());
					this.timestamp=data.seckill.time_end - newtime/1000 //活动倒计时
					this.$all.setData('timestamp',this.timestamp)
					
					this.xianshiList.push(...data.site)
					let user=this.$all.getData('userInfo').role_type //获取用户信息
					this.xianshiList.forEach(i=>{
						i.prices= user==0 ? i.prices : user==1 ? i.prices1 : user==2 ? i.prices2 :i.prices3 
						i.shengyu=Number(i.stock - i.sales) //剩余件数
						i.bili=Math.round(i.shengyu / i.stock *100) //剩余比例
					})
				})
			},
			go_detail(item){ //秒杀商品详情
				uni.navigateTo({
					url:"miaoshaDetail?shopid="+item.id
				})
			},
			
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	padding: 5px 15px;
	.con_1{
		image{
			width: 345px;
			height: 100px;
		}
	}
	.con_2{
		padding: 10px 0;
	}
	.con_3{
		.shoplists{
			padding: 15px;background-color: #FFFFFF;border-radius: 10px;margin-bottom: 10px;
			.shopimg{
				width: 100px;
				height: 100px;
				image{
					width: 100px;height: 100px;border-radius: 10px;
				}
			}
			.qiangG{
				width: 150rpx;margin-left: 10px;background-color: #ee1b1b;padding: 5px 10px;color: #FFFFFF;border-radius: 30px;
				text-align: center;
			}
			
		}
	}
	
}

</style>
